.flexStart {
  display: flex;
  justify-content: flex-start;
}
.flexCenter {
  display: flex;
  justify-content: center;
  align-items: center;
}
.flexEnd {
  display: flex;
  justify-content: flex-end;
}
.flexAround {
  display: flex;
  justify-content: space-around;
}
.flexBetween {
  display: flex;
  justify-content: space-between;
}
.flexStartCenter {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
.flexEndCenter {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.flexBetweenCenter {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.contentDiv {
  background: #fff;
}
html {
  font-size: 10px !important;
}
.mb-8 {
  margin-bottom: 20px;
}
.mb-15 {
  margin-bottom: 15px;
}
.mb-20 {
  margin-bottom: 20px;
}
.pd-20 {
  margin-bottom: 20px;
}
@for $i from 1 through 100 {
  .pl-#{$i} {
    padding-left: $i + px;
  }
  .pr-#{$i} {
    padding-right: $i + px;
  }
  .pt-#{$i} {
    padding-top: $i + px;
  }
  .pb-#{$i} {
    padding-bottom: $i + px;
  }
  .p-#{$i} {
    padding: $i + px;
  }
  .p-x-#{$i} {
    padding: auto $i + px;
  }
  .p-y-#{$i} { 
    padding: $i + px auto;
  }

  .ml-#{$i} {
    margin-left: $i + px;
  }
  .mr-#{$i} {
    margin-right: $i + px;
  }
  .mt-#{$i} {
    margin-top: $i + px;
  }
  .mb-#{$i} {
    margin-bottom: $i + px;
  }
  .m-#{$i} {
    margin: $i + px;
  }
  .m-x-#{$i} {
    margin: auto $i + px;
  }
  .m-y-#{$i} {
    margin: $i + px auto;
  }
  .fs-#{$i} {
    font-size: $i + px;
  }
  
}
